<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>扫一扫</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"/>
    <link rel="stylesheet" href="../layui-admin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layui-admin/style/admin.css" media="all">
</head>
<body>
<div id="scan-layer" class="layui-card" style="display: none;">
    <div class="layui-card-header layui-icon layui-icon-app">
        扫一扫
    </div>
    <div class="layui-card-body layui-form">
        <div class="layui-form-item">
            <label for="scan-result"></label><input id="scan-result" class="layui-input" placeholder="扫一扫"/>
        </div>
        <div class="layui-form-item">
            <label for="video-select"></label><select id="video-select"></select>
        </div>
        <div class="layui-form-item">
            <button id="scan-code" class="layui-btn layui-btn-fluid">扫一扫</button>
        </div>
    </div>
</div>
<div id="scan-video"
     style="display:none;background:black;width:100%;height:100%;overflow:hidden;margin:0;position:absolute;z-index:99999999">
    <video id="video" style="width:100%;height:100%;position:relative;"></video>
    <i id="scan-close" class="layui-icon layui-icon-left"
       style="display:block;position:absolute;top:10px;left:10px;font-size:30px;color:white;"></i>
    <i id="scan-image" class="layui-icon layui-icon-picture"
       style="display:block;position:absolute;bottom:10px;left:10px;font-size:30px;color:white;"></i>
    <input id="scan-file" type="file" accept=".jpg,.png" style="display: none;"/>
    <audio id="scan-audio" src="raw/scan-code.wav" preload="auto" style="display: none;"></audio>
</div>
<script src="../layui-admin/layui/layui.js"></script>
<script src="js/zxing.js"></script>
<script>
    layui.config({
        base: '../layui-admin/'
    }).extend({
        index: 'lib/index'
    }).use(['index'], function () {
        const $ = layui.$;
        const form = layui.form;
        const layer = layui.layer;
        layer.open({
            type: 1
            , title: false
            , resize: false
            , closeBtn: false
            , area: '300px'
            , content: $('#scan-layer')
        });
        const codeReader = new ZXing.BrowserMultiFormatReader();
        codeReader.listVideoInputDevices()
            .then(function (videoInputDevices) {
                videoInputDevices.forEach((element) => {
                    console.log(element);
                    $('#video-select').append(new Option(element.label, element.deviceId));
                })
                form.render("select");
            })
            .catch(function (err) {
                console.log(err);
                //layer.msg(err.toString());
            });
        $('#scan-code').on('click', function () {
            $('#scan-result').val('');
            $('#scan-video').show();
            const deviceId = $('#video-select').val() || undefined;
            codeReader.decodeOnceFromVideoDevice(deviceId, 'video')
                .then(function (result) {
                    $('#scan-result').val(result.text);
                    $('#scan-audio')[0].play();
                    $('#scan-video').hide();
                    codeReader.reset();
                })
                .catch(function (err) {
                    console.log(err);
                    //layer.msg(err.toString());
                    $('#scan-video').hide();
                    codeReader.reset();
                });
        });
        $('#scan-image').on('click', function () {
            $("#scan-file").click();
        });
        $("#scan-file").on("change", function () {
            const that = this;
            const files = this.files || [];
            if (files.length === 0) return;
            const fileReader = new FileReader();
            fileReader.readAsDataURL(files[0]);
            fileReader.onload = function () {
                codeReader.decodeFromImage(undefined, fileReader.result)
                    .then(function (result) {
                        $('#scan-result').val(result.text);
                        $('#scan-audio')[0].play();
                        $('#scan-video').hide();
                        codeReader.reset();
                        that.value = null;
                    })
                    .catch(function (err) {
                        console.log(err);
                        //layer.msg(err.toString());
                        $('#scan-video').hide();
                        codeReader.reset();
                        that.value = null;
                    });
            };
            fileReader.onerror = function (err) {
                console.log(err);
                //layer.msg(err.toString());
                $('#scan-video').hide();
                codeReader.reset();
            }
        });
        $('#scan-close').on('click', function () {
            $('#scan-video').hide();
            codeReader.reset();
        });
    });
</script>
</body>
</html>
